<template>
  <el-table
    :data="nameList"
    stripe
    style="width: 100%"
  >
    <el-table-column
      align="center"
      type="index"
      label="序号"
      width="120"
    />
    <el-table-column
      align="center"
      prop="name"
      label="角色"
      width="360"
    />
    <el-table-column
      align="center"
      prop="description"
      label="描述"
      width="360"
    />
    <el-table-column
      align="center"
      label="操作"
    >
      <template slot-scope="{ row }">
        <el-button size="small" type="success" @click="assignPerm(row.id)">分配权限</el-button>
        <el-button size="small" type="primary" @click="editRole(row.id)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteRole(row.id)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

</template>
<script>
import { deleteRole } from '@/api/setting.js'

export default {
  props: {
    nameList: {
      required: true,
      type: Array
    }

  },
  // methods是有s的，别写错了，不然会被认为函数没有被定义
  methods: {
    async deleteRole(id) {
      console.log(id)
      //  提示
      try {
        await this.$confirm('确认删除该角色吗')
        // 只有点击了确定 才能进入到下方
        await deleteRole(id) // 调用删除接口
        this.$emit('updateName')// 重新加载数据
        this.$message.success('删除角色成功')
      } catch (error) {
        console.log(error)
      }
    },
    editRole(id) {
      this.$emit('getId', id)
    },
    assignPerm(id) {
      this.$emit('getPermId', id)
    }
  }

}
</script>
